$font-family: (
  'rb': 'Roboto Bold',
  'rbi': 'Roboto Bold Italic',
  'rt': 'Roboto Thin',
  'rti': 'Roboto Thin Italic',
  'r': 'Roboto',
  'ri': 'Roboto Italic'
);

:root {
  // Typography
  @each $font-style, $font-name in $font-family {
    --f-#{$font-style}: #{$font-name}, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
      'Segoe UI Emoji';
  }

  // Shadows
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
  --shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);

  // Utils
  --u-dur: 0.2s;
  --u-gap: 8px;
  --mask-z-index: 999;

  // Layouts
  --b-sm: 640px;
  --b-md: 768px;
  --b-lg: 1060px;
  --b-xl: 1280px;

  // JJIndexLayouts
  --jj-header-height: 40px;
  --jj-left-sidebar-width: 280px;
  --jj-left-sidebar-collapse-width: 63px;
}
